<template>
  <div class="period-of-year-wrap">
    <div :class="{'mobile-create-flex': showMobilePage}" class="base-date">
      <el-form-item v-if="legalType !== 1" :prop="moduleName + '.stagesYearType'" label="" class="small-input">
        <el-select v-model="selectData.stagesYearType" placeholder="请选择" popper-class="global-select-down" >
          <!-- <el-option
            label="请选择"
            value=""
          /> -->
          <el-option
            v-for="item in mffTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :prop="moduleName + '.legalDate'" class="date-range">
        <el-date-picker
          v-model="selectData.legalDate"
          type="daterange"
          format="yyyy/MM/dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          @change="datePickerTime"
        />
      </el-form-item>
      <!-- <span class="input-dec">(合同起止时间)</span> -->
      <el-form-item :prop="moduleName + '.settleAccountPeriod'">
        <el-select v-model="selectData.settleAccountPeriod" placeholder="结算周期" popper-class="global-select-down" class="small-input">
          <!-- <el-option
            label="请选择"
            value=""
          /> -->
          <el-option
            v-for="item in settleAccountPeriodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </div>
    <div :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
      <div class="stages">
        <div v-for="(item, index) in selectData.items" :key="index" class="date-picker-item stages-date-picker-error">
          <el-form-item :rules="rules['contractInfo.date.items.payDate']" :prop="'contractInfo.date.items.' + index + '.payDate'">
            <stages-date-picker :index="index" :show-delete-btn="selectData.items.length > 1" v-model="item.payDate" @delete="deleteStage" />
          </el-form-item>
        </div>
      </div>
      <div v-if="isCanAddDate" class="add-btn" @click="add">
        添加
      </div>
    </div>
  </div>
</template>
<script>
import { settleAccountPeriodOptions, mffTypeOptions } from '../../module/options';
import StagesDatePicker from './stagesDatePicker';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapState } from 'vuex';
export default {
  name: 'PeriodOfYear',
  components: { StagesDatePicker },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    legalType: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      settleAccountPeriodOptions,
      mffTypeOptions,
      addIcon,
      legalDate: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    isCanAddDate() {
      return this.selectData.items.length < 24;
    }
  },
  methods: {
    add() {
      const item = { payDate: '' };
      this.selectData.items.push(item);
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.items.splice(index, 1);
      }
    },
    datePickerTime(value) {
      if (!value) {
        this.selectData.startTime = '';
        this.selectData.endTime = '';
      } else {
        this.selectData.startTime = Math.round(value[0]);
        this.selectData.endTime = Math.round(value[1]);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.period-of-year-wrap {
  & ::v-deep {
    .el-form-item__error {
      padding-top: 2px;
    }
    // .el-input__inner {
    //   max-width: 240px !important;
    //   min-width: 134px !important;
    //   width: calc(100vw * 0.13) !important;
    //   height: 32px;
    //   line-height: 32px;
    //   border-color: #ddd;
    // }
    .el-form-item {
      margin-right: 10px !important;
    }
    .date-range {
      .el-input__inner {
        min-width: 194px !important;
      }
      .el-date-editor .el-range-input {
        font-size: 14px;
      }
    }
    .small-input {
      .el-input__inner {
        max-width: 120px !important;
        min-width: 120px !important;
      }
    }
  }
}

.stages-date-picker-error {
  & ::v-deep {
    .el-form-item__error {
      margin-left: 120px;
    }
  }
}

.base-date {
  display: flex;
  align-items: center;
  .input-dec {
    margin-left: 12px;
    margin-right: 56px;
    color: #999;
    font-size: 14px;
  }
}
@media screen and (max-width: 1176px) {
  .base-date {
    .input-dec {
      margin-left: 0px;
      margin-right: 6px;
    }
  }
}
@media screen and (min-width: 1176px) and (max-width: 1320px) {
 .base-date {
    .input-dec {
      margin-left: 0px;
      margin-right: 2px;
    }
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
    .small-input {
      .el-input__inner {
        max-width: unset !important;
        min-width: 120px !important;
      }
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
  }
}
</style>
